<%@ page language="java" contentType="text/html; charset=UTF-8"   pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
	<head>
		 <jsp:include page="../commons/header.jsp" />
	</head>

	<body class="no-skin">
	    <!-- 导航栏 start		-->
		  <jsp:include page="../commons/navbar.jsp" />
		<!-- 导航栏 end -->

		<div class="main-container ace-save-state" id="main-container">
			<script type="text/javascript">
				try{ace.settings.loadState('main-container')}catch(e){}
			</script>
            <!--- 左边栏-菜单 start -->
			   <jsp:include page="../commons/sidebar.jsp" />
			<!--- 左边栏-菜单 end -->

			<!--- 内容主体 start -->
			<div class="main-content">
				<div class="main-content-inner">
				    <!-- 向导栏 start-->
					<div class="breadcrumbs ace-save-state" id="breadcrumbs">
						<ul class="breadcrumb">
								<li>
								<i class="ace-icon fa fa-home home-icon"></i>
								<a href="#">首页</a>
							</li>

							<li>
								<a href="#">角色管理</a>
							</li>
							<li class="active">角色-列表</li>
						</ul><!-- /.breadcrumb -->

						<div class="nav-search" id="nav-search">
							<form class="form-search">
								<span class="input-icon">
									<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
									<i class="ace-icon fa fa-search nav-search-icon"></i>
								</span>
							</form>
						</div><!-- /.nav-search -->
					</div>
					<!-- 向导栏 end-->

					<!-- 内容页 start -->
					<div class="page-content">
				          			<div class="widget-box transparent" id="widget-box-13">
												<div class="widget-header">
													<h4 class="widget-title lighter">角色管理</h4>

													<div class="widget-toolbar no-border">
														<ul class="nav nav-tabs" id="myTab2">
															<li  class="active">
																<a data-toggle="tab" href="#roleAdd">增加</a>
															</li>

													

															<li>
																<a data-toggle="tab" href="javascript:void(0)" onclick="window.location.href='${pageContext.request.contextPath}/role/toRoleList/0'">列表</a>
															</li>
														</ul>
													</div>
												</div>

												<div class="widget-body">
													<div class="widget-main padding-12 no-padding-left no-padding-right">
														<div class="tab-content padding-4">
														
															<div id="roleAdd" class="tab-pane in active ">
																<div class="scrollable-horizontal" data-size="800">
																	${requestScope.role_add_msg }
																	<form action="${pageContext.request.contextPath }/role/addRole" method="post" class="form-horizontal" role="form">
																	    <input type="hidden" name="token" value="${sessionScope.token }">
																	    <input type="hidden" name="token.invoke" value="/role/toRoleAdd">
																		<div class="form-group">
																			<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 角色名 </label>

																			<div class="col-sm-9">
																				<input name="ROLE_NAME" type="text" id="form-field-1" placeholder="角色名" class="col-xs-10 col-sm-5" />
																			</div>
																		</div>

																		<div class="form-group">
																			<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 全部权限 <input  id="chAllPermisssion" type="checkbox" /></label>

																		</div>
																		<%--权限矩阵，四个权限换行 
																		  思路：
																		  1.表格的换行标签，就是<tr>
																		  2.表格的列标签就是<td>
																		  3.算法准备，每四列换行，表示出现了四个<td> 就使用一个<tr>换行
																		    算法 
																		      1.开始标签<tr> 循环序号%4==0 （四的倍数），序号从0开始。
																		      2.结束标签</tr>,循环序号%4==3 (表示每四条加上)</tr>
																		      
																		      -输出
																		      <tr> <td>     		0
																				     <td>    		1
																				     <td>    		2
																				     <td> </tr>     3
																				<tr> <td>      		4
																					 <td>   		5
																					 <td>    		6
																					 <td></tr>      7
																				<tr> <td>      		8
																					 <td>   		9
																					 <td>    		10
																					 <td></tr>      11
																		    
																		    问题：为什么需要从0开始，
																		    答：因为表格主体，必须要以tr开头
																		    <table>
																		      <tr> 
																		      
																		      </tr>
																		    </table>
																		  
																		--%>
																		<c:forEach var="modular" items="${requestScope.modulars }">
																			<div class="form-group">
																				<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> ${modular.MODULAR_NAME }<input onclick="ckModularPermission(this)"  type="checkbox" /></label>
	
																				<div class="col-sm-8">
																				    <table class="table">
															
																					     <c:forEach var="permission" varStatus="status" items="${modular.permissions }">
																					     <c:if test="${status.index%4==0 }">
																					       <tr>
																					     </c:if>
																					     
																					     <td>${permission.PERMISSION_NAME }<input name="perminssionIds"  value="${permission.PERMISSION_ID }"   type="checkbox" /></td>
																					    
																					     <c:if test="${status.index%4==3 }">
																					      </tr>
																					      </c:if>
																						 </c:forEach>

																					</table>
																					
																				</div>
																			</div>
																		</c:forEach>
																		
														
																		

																		
																		
																		<div class="form-group">
																			
																			<div class="col-sm-7 text-right">
																				<button type="submit" class="btn btn-primary">增加角色</button>
																			</div>
																		</div>
																	</form>

																</div>
															</div>

												
														</div>
													</div>
												</div>
											</div>
					</div><!-- /.page-content -->
					<!-- 内容页 end -->
				</div>
			</div><!-- /.main-content -->
			<!--- 内容主体 end -->

			 <!--页尾 start -->
		 <jsp:include page="../commons/footer.jsp"></jsp:include>

		
			 <!--页尾 end -->
		</div><!-- /.main-container -->

		<!-- basic scripts -->

		<!--[if !IE]> -->
		<script src="${pageContext.request.contextPath}/lib/ace-admin/js/jquery-2.1.4.min.js"></script>

		<!-- <![endif]-->

		<!--[if IE]>
<script src="${pageContext.request.contextPath}/lib/ace-admin/js/jquery-1.11.3.min.js"></script>
<![endif]-->
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='${pageContext.request.contextPath}/lib/ace-admin/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="${pageContext.request.contextPath}/lib/ace-admin/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->

		<!-- ace scripts -->
		<script src="${pageContext.request.contextPath}/lib/ace-admin/js/ace-elements.min.js"></script>
		<script src="${pageContext.request.contextPath}/lib/ace-admin/js/ace.min.js"></script>

		<!-- inline scripts related to this page -->
		<script type="text/javascript">
		//1选择或者反选所有的复选框
		  $("#chAllPermisssion").click(function(){
			  if($(this).prop("checked")==true){
				  $("input[type='checkbox']").prop("checked",true);
			  }else{
				  $("input[type='checkbox']").prop("checked",false);
			  }
		  });
		//2.选择或者反选，指定模块的复选框。不能通过ID来获得唯一的控件。有什么办法给控件绑定事件
		//解决方案，让控件调用方法
		//如何选中，不能使用类型以及名字属性获得的多个复选框？
		//答：当属性不可作为获得条件的时候，剩下的就是通过位置定位
		//什么是位置定位标签呢？
		//我们知道网页是基于DIV+CSS布局。所以每个区域的控件必定一个DIV里面。所以我们可以找到这部分控件共同的DIV来定位这些控件
		//思想
		//1.找到 模块下的复选框的共同DIV
		//2.通过获得共同DIV里面的复选框来设值选中或者反选设置
		//3.我们是通过当前控来获得共同DIV对象的
		
		var ckModularPermission=function(obj){
			//obj表示当前对象，将当前DOM对象转成JQuery对象
			var parentDiv=$(obj).parents(".form-group");
			
			//获得这个parentDiv对象里面的<input type='checkbox'>
			var chk=parentDiv.find("input[type='checkbox']");
			if($(obj).prop("checked")==true){
				chk.prop("checked",true);
			}else{
				chk.prop("checked",false);
			}
			
			
		};
		
		
		</script>
	</body>
</html>
